import React, { Component } from 'react';
import { View, Image } from 'react-native';
import _ from 'lodash';
import Icon from 'react-native-vector-icons/Foundation';
import styles from './style';

const stars = (size, type, color, full) => {
  const imgs = new Array(full);
  const cont = _.map(imgs, (dom, i) => (
    <Icon
      key={`${type}_${i}`}
      name="star"
      size={size}
      color={color}
      style={{ width: size, height: size }}
    />
  ));
  return <View style={styles.starWrap}>{cont}</View>;
};

export default ({ data = 0, size = 24, full = 10 }) => {
  const wrapWidth = size * full;
  return (
    <View style={[styles.wrap, { width: wrapWidth, height: size }]}>
      {stars(size, 'bg', '#ddd', full)}
      <View style={[styles.yellowStar, { width: wrapWidth * data / 10 }]}>
        {stars(size, 'front', '#ffd480', full)}
      </View>
    </View>
  );
};
